<template>
	<view class="rainfall-page">
		<!-- 固定导航栏 -->
		<view class="navbar fixed-navbar">
			<view class="nav-left" @click="backFn">
				<u-icon name="arrow-left" color="#333" size="26"></u-icon>
			</view>
			<view class="nav-center">
				<text class="page-title">雨量监测系统</text>
			</view>
			<view class="nav-right">
				<u-button type="primary" shape="circle" :color="butcolor" :text="rightText"
					@click="butBleFn"></u-button>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 数据概览卡片 -->
			<!-- 数据概览卡片 -->
			<view class="overview-card" v-if="rainfallData">
				<view class="overview-header">
					<text class="overview-title">实时数据概览</text>
					<view class="update-time">
						<u-icon name="clock" size="26" color="#666"></u-icon>
						<text class="time-text">最后更新: {{ formatTime(rainfallData.time) }}</text>
					</view>
				</view>

				<view class="overview-grid">
					<view class="overview-item main-rainfall">
						<text class="item-label">分钟雨量</text>
						<text class="item-value">{{ rainfallData.rainfall || 0 }}</text>
						<text class="item-unit">毫米</text>
					</view>
					<view class="overview-item hour-rainfall">
						<text class="item-label">小时降雨</text>
						<text class="item-value">{{ rainfallData.hourRainfall || 0 }}</text>
						<text class="item-unit">毫米</text>
					</view>
					<view class="overview-item rain-intensity">
						<text class="item-label">雨强</text>
						<text class="item-value">{{ rainfallData.rainIntensity || 0 }}</text>
						<text class="item-unit">毫米/时</text>
					</view>
					<view class="overview-item today-rainfall">
						<text class="item-label">今日降雨</text>
						<text class="item-value">{{ rainfallData.todayRainfall || 0 }}</text>
						<text class="item-unit">毫米</text>
					</view>
					<view class="overview-item day24-rainfall">
						<text class="item-label">24小时降雨</text>
						<text class="item-value">{{ rainfallData.day24Rainfall || 0 }}</text>
						<text class="item-unit">毫米</text>
					</view>
					<view class="overview-item yesterday-rainfall">
						<text class="item-label">昨日降雨</text>
						<text class="item-value">{{ rainfallData.yesterdayRainfall || 0 }}</text>
						<text class="item-unit">毫米</text>
					</view>
				</view>
			</view>

			<!-- 详细信息区域 -->
			<view class="detail-section" v-if="rainfallData">
				<view class="section-header">
					<text class="section-title">设备详细信息</text>
				</view>

				<view class="detail-grid">
					<!-- 设备信息 -->
					<view class="detail-card device-info">
						<view class="card-header">
							<u-icon name="star" size="26" color="#1890ff"></u-icon>
							<text class="card-title">设备信息</text>
						</view>
						<view class="info-list">
							<view class="info-item">
								<text class="info-label">设备编号:</text>
								<text class="info-value">{{ rainfallData.ID || '未知' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">设备识别码:</text>
								<text class="info-value">{{ rainfallData.IMEI || '未知' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">数据时间:</text>
								<text class="info-value">{{ formatTime(rainfallData.time) }}</text>
							</view>
						</view>
					</view>

					<!-- 位置信息 -->
					<view class="detail-card location-info">
						<view class="card-header">
							<u-icon name="map" size="26" color="#52c41a"></u-icon>
							<text class="card-title">位置信息</text>
						</view>
						<view class="info-list">
							<view class="info-item">
								<text class="info-label">经度:</text>
								<text class="info-value">{{ rainfallData.longitude || '--' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">纬度:</text>
								<text class="info-value">{{ rainfallData.latitude || '--' }}</text>
							</view>
						</view>
					</view>

					<!-- 设备状态 -->
					<view class="detail-card status-info">
						<view class="card-header">
							<u-icon name="heart" size="26" color="#fa541c"></u-icon>
							<text class="card-title">设备状态</text>
						</view>
						<view class="info-list">
							<view class="info-item">
								<text class="info-label">设备电压:</text>
								<text class="info-value">{{ rainfallData.voltage || 0 }} 伏</text>
							</view>
							<view class="info-item">
								<text class="info-label">电池容量:</text>
								<text class="info-value">{{ rainfallData.capacity || 0 }}%</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 无数据状态 -->
			<view class="empty-state" v-else>
				<view class="empty-content">
					<u-loading-icon size="50"></u-loading-icon>
					<text class="empty-title">等待数据中...</text>
					<text class="empty-desc">设备未连接或未获取到雨量数据</text>
					<u-loading size="60" color="#1890ff" class="loading-icon"></u-loading>
				</view>
			</view>

			<!-- 数据日志 -->
			<view class="log-section" v-if="translationContent.length > 0">
				<view class="section-header">
					<text class="section-title">数据接收日志</text>
					<text class="log-badge" style="background-color: #a1a1a1;" @click="clearTheLog">清空日志</text>
					<text class="log-badge">{{ translationContent.length }}</text>
				</view>
				<view class="log-container">
					<scroll-view class="log-scroll" scroll-y>
						<view v-for="(item, index) in translationContent.slice().reverse()" :key="index"
							class="log-item">
							<view class="log-header">
								<text class="log-time">{{ getCurrentTime() }}</text>
								<text class="log-type">数据包</text>
							</view>
							<text class="log-content">{{ item }}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 全局加载 -->
		<u-loading :show="loading" text="数据加载中..." color="#1890ff"></u-loading>
		<!-- 请求 -->
		<u-toast ref="uToast" position="top"></u-toast>
	</view>
</template>

<script>
	import {
		hexToString,
		extractMainStatus,
		strToHexArray
	} from '@/common/hexUtils.js';

	export default {
		data() {
			return {
				// 蓝牙相关数据
				deviceId: '',
				serviceId: '',
				characteristicId: '',
				fff: '',
				butcolor: '#f43f3f',
				rightText: '连接设备',

				// 数据相关
				translationContent: [],
				receivedData: '',
				isReceivingData: false,
				rainfallData: null,
				loading: false,
				autoRefreshInterval: null
			};
		},
		onUnload() {
			console.log('页面卸载');
			// 清除定时器
			this.clearAutoRefresh();
			console.log('定时器', this.autoRefreshInterval);
			console.log('卸载定时器', this.autoRefreshInterval);
		},
		onShow() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 3000);
			this.initPage();
			// 自动请求雨量
			this.initPage();
			this.startAutoRefresh();
		},
		methods: {
			// 清理日志
			clearTheLog() {
				this.translationContent = []
			},
			// 专门的清理方法
			clearAutoRefresh() {
				if (this.autoRefreshInterval) {
					clearInterval(this.autoRefreshInterval);
					this.autoRefreshInterval = null; // 关键：清空引用
					console.log('定时器已清理');
				}
			},

			// 专门的启动方法
			startAutoRefresh() {
				this.clearAutoRefresh(); // 先确保清理干净

				this.autoRefreshInterval = setInterval(() => {
					this.autoRequestData();
					// this.dataUpdateFn();
					console.log('15秒自动请求雨量数据');
				}, 20000);
			},
			/**
			 * 页面初始化
			 */
			initPage() {
				this.loading = true;
				this.initBluetooth();
			},
			// 数据更新
			dataUpdateFn() {
				this.$refs.uToast.show({
					type: "success",
					message: "刷新！"
				});
			},


			/**
			 * 自动请求数据
			 */
			autoRequestData() {
				if (this.rightText === '设备已连接') {
					let msg = ['0x48', '0x0D', '0x0A'];
					this.conbuffer(msg);
				}
			},

			/**
			 * 格式化时间
			 */
			formatTime(timeStr) {
				if (!timeStr) return '--';

				// 统一处理：先替换所有斜杠为横杠
				let formattedTime = timeStr.replace(/\//g, '-');

				// 使用正则表达式匹配日期时间格式并统一
				// 匹配格式：YYYY-MM-DD-HH:MM 或 YYYY-M-D-HH:MM
				const timeRegex = /(\d{4})-(\d{1,2})-(\d{1,2})-(\d{1,2}:\d{1,2})/;
				const match = formattedTime.match(timeRegex);

				if (match) {
					// 重新组合为 YYYY-MM-DD HH:MM 格式
					const [, year, month, day, time] = match;
					formattedTime = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')} ${time}`;
				}

				return formattedTime;
			},

			/**
			 * 获取当前时间
			 */
			getCurrentTime() {
				const now = new Date();
				return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
			},

			/**
			 * 初始化蓝牙连接
			 */
			initBluetooth() {
				// 监听蓝牙连接状态变化
				uni.onBLEConnectionStateChange((res) => {
					if (res.connected !== true) {
						this.butcolor = '#be3131';
						this.rightText = '连接设备';
						uni.$u.vuex('vuex_devicename', '');
						uni.$u.vuex('vuex_deviceId', '');
						uni.showToast({
							title: '设备已断开',
							icon: 'error'
						});
					}
				});

				this.deviceId = this.vuex_deviceId;
				if (this.deviceId) {
					this.getBLEDeviceServices();
				} else {
					this.loading = false;
					uni.showToast({
						title: '未找到设备',
						icon: 'error'
					});
				}
			},

			/**
			 * 监听蓝牙数据变化
			 */
			listenValueChange() {
				setTimeout(() => {
					uni.onBLECharacteristicValueChange(res => {
						let resHex = this.ab2hex(res.value);
						console.log('接收蓝牙数据', resHex);
						this.translationContent.push(hexToString(resHex));

						// 处理蓝牙数据
						this.onBluetoothData(resHex, resHex.length);
					});
				}, 500);
			},

			/**
			 * 处理蓝牙数据
			 */
			onBluetoothData(chunkHex, length) {
				try {
					const chunkStr = hexToString(chunkHex);

					// 过滤心跳包
					if (this.isHeartbeatPacket(chunkStr)) {
						return;
					}

					// JSON数据开始
					if (chunkStr.includes('{"RainInfo":{')) {
						this.receivedData = chunkStr;
						this.isReceivingData = true;
						return;
					}

					// 数据拼接
					if (this.isReceivingData) {
						this.receivedData += chunkStr;

						// 检查数据完整性
						if (this.isJsonComplete(this.receivedData)) {
							this.processCompleteData(this.receivedData);
							this.isReceivingData = false;
							this.receivedData = '';
						}
					} else if (chunkStr.includes('{"RainInfo":')) {
						this.receivedData = chunkStr;
						if (this.isJsonComplete(this.receivedData)) {
							this.processCompleteData(this.receivedData);
							this.receivedData = '';
						} else {
							this.isReceivingData = true;
						}
					}

				} catch (error) {
					console.error('数据处理错误:', error);
					this.isReceivingData = false;
					this.receivedData = '';
				}
			},

			/**
			 * 判断是否为心跳包
			 */
			isHeartbeatPacket(str) {
				return str.includes('Mobile app is still active !') ||
					/^\d+---Mobile app is still active !/.test(str);
			},

			/**
			 * 判断JSON数据是否完整
			 */
			isJsonComplete(str) {
				try {
					JSON.parse(str);
					return true;
				} catch (e) {
					const openBraces = (str.match(/{/g) || []).length;
					const closeBraces = (str.match(/}/g) || []).length;
					return openBraces > 0 && openBraces === closeBraces;
				}
			},

			/**
			 * 处理完整数据
			 */
			processCompleteData(completeData) {
				try {
					const cleanData = completeData.replace(/\r?\n|\r/g, '');
					const dataObj = JSON.parse(cleanData);

					this.useRainfallData(dataObj);

				} catch (error) {
					console.error('JSON解析失败:', error);

					// 尝试修复数据格式
					try {
						const jsonStart = completeData.indexOf('{"RainInfo":');
						if (jsonStart !== -1) {
							let jsonEnd = completeData.lastIndexOf('}');
							if (jsonEnd !== -1) {
								const fixedJson = completeData.substring(jsonStart, jsonEnd + 1);
								const dataObj = JSON.parse(fixedJson);
								this.useRainfallData(dataObj);
							}
						}
					} catch (fixError) {
						console.error('数据修复失败:', fixError);
					}
				}
			},

			/**
			 * 使用雨量数据更新界面
			 */
			// 使用雨量数据更新界面
			useRainfallData(data) {
				if (data && data.RainInfo) {
					const rainInfo = data.RainInfo;

					this.rainfallData = {
						IMEI: rainInfo.IMEI,
						ID: rainInfo.ID,
						time: rainInfo.TIM,
						longitude: rainInfo.LON,
						latitude: rainInfo.LAT,
						rainfall: rainInfo.MR || 0, // 分钟降雨量
						hourRainfall: rainInfo.HR || 0, // 小时降雨量
						rainIntensity: rainInfo.HS || 0, // 雨强
						todayRainfall: rainInfo.TR || 0, // 今日降雨量
						day24Rainfall: rainInfo.H24R || 0, // 24小时降雨量
						yesterdayRainfall: rainInfo.YR || 0, // 昨日降雨量
						voltage: rainInfo.VOLT || 0,
						capacity: rainInfo.CAPA || 0
					};

					this.loading = false;
					console.log('雨量数据更新成功');
				}
			},

			/**
			 * 返回上一页
			 */
			backFn() {
				uni.navigateBack({
					delta: 1
				});
			},

			/**
			 * 蓝牙连接/断开操作
			 */
			butBleFn() {
				if (this.rightText == '设备已连接') {
					this.disconnectBluetooth();
				} else {
					uni.navigateTo({
						url: '/pages/index/BLE'
					});
				}
			},

			/**
			 * 断开蓝牙连接
			 */
			disconnectBluetooth() {
				uni.closeBLEConnection({
					deviceId: this.vuex_deviceId,
					success: (res) => {
						uni.$u.vuex('vuex_devicename', '');
						uni.$u.vuex('vuex_deviceId', '');
						this.butcolor = '#be3131';
						this.rightText = '连接设备';
						uni.showToast({
							title: '设备已断开',
							icon: 'success'
						});
					}
				});
			},

			// 以下为原有的蓝牙通信方法，保持不变
			ab2hex(buffer) {
				const hexArr = Array.prototype.map.call(
					new Uint8Array(buffer),
					function(bit) {
						return ('00' + bit.toString(16)).slice(-2)
					}
				)
				return hexArr.join('')
			},

			conbuffer(data) {
				let msg = data
				const buffer = new ArrayBuffer(msg.length)
				const dataView = new DataView(buffer)
				for (var i = 0; i < msg.length; i++) {
					dataView.setUint8(i, msg[i]);
				}
				this.sendMsgToKey(buffer)
			},

			sendMsgToKey(buffer) {
				console.log('发送数据');
				var that = this
				const packageSize = 20
				if (buffer.byteLength <= 20) {
					uni.writeBLECharacteristicValue({
						deviceId: that.deviceId,
						serviceId: that.serviceId,
						characteristicId: that.fff,
						value: buffer,
						writeType: 'write',
						success: (res) => {
							console.log('数据请求发送成功');
						},
						fail: (err) => {
							console.log('传输失败', err)
						}
					})
				} else {
					var newData = buffer.slice(20)
					var writeBuffer = buffer.slice(0, 20)
					uni.writeBLECharacteristicValue({
						deviceId: that.deviceId,
						serviceId: that.serviceId,
						characteristicId: that.fff,
						value: writeBuffer,
						writeType: 'write',
						success: function(res) {
							setTimeout(() => {
								that.sendMsgToKey(newData)
							}, 100)
						},
						fail: (err) => {
							console.log('传输失败', err)
						}
					})
				}
			},

			getBLEDeviceServices() {
				setTimeout(() => {
					uni.getBLEDeviceServices({
						deviceId: this.vuex_deviceId,
						success: (res) => {
							res.services.forEach((item) => {
								if (item.uuid.indexOf("0000FFF0") != -1 || item.uuid.indexOf(
										"0000FFE0") != -1) {
									this.serviceId = item.uuid;
									this.getBLEDeviceCharacteristics()
								}
							})
						}
					})
				}, 1000)
			},

			getBLEDeviceCharacteristics() {
				setTimeout(() => {
					uni.getBLEDeviceCharacteristics({
						deviceId: this.deviceId,
						serviceId: this.serviceId,
						success: (res) => {
							this.characteristics = res.characteristics
							res.characteristics.forEach((item) => {
								if (item.uuid.indexOf("FFF2") != -1 || item.uuid.indexOf(
										"FFE1") != -1) {
									this.fff = item.uuid
								}
								if (item.uuid.indexOf("0000FFE1") != -1 || item.uuid.indexOf(
										"0000FFF1") != -1) {
									this.characteristicId = item.uuid
									this.notifyBLECharacteristicValueChange(item.uuid)
								}
							})
						}
					})
				}, 1000)
			},

			notifyBLECharacteristicValueChange(characteristicId) {
				uni.notifyBLECharacteristicValueChange({
					state: true,
					deviceId: this.deviceId,
					serviceId: this.serviceId,
					characteristicId: this.characteristicId,
					success: (res) => {
						this.loading = false;
						this.listenValueChange();
						this.butcolor = '#00aa7f';
						this.rightText = '设备已连接';
					},
					fail: (res) => {
						this.loading = false;
						uni.showToast({
							title: '连接失败',
							icon: 'error'
						});
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.rainfall-page {
		background: #f8f9fa;
		padding-top: 180rpx;
		/* 为固定导航栏留出空间 */

		// 固定导航栏
		.fixed-navbar {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			background: #ffffff;
			border-bottom: 1rpx solid #f0f0f0;
		}

		// 导航栏样式
		.navbar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 80rpx 30rpx 30rpx 30rpx;
			background: #ffffff;

			.nav-left {
				display: flex;
				align-items: center;
				flex: 1;
			}

			.nav-center {
				flex: 2;
				text-align: center;

				.page-title {
					font-size: 35rpx;
					font-weight: bold;
					color: #333333;
				}
			}

			.nav-right {
				flex: 1;
				display: flex;
				justify-content: flex-end;
			}
		}

		// 内容区域
		.content {
			padding: 30rpx;

			// 概览卡片
			// 概览卡片
			.overview-card {
				background: #ffffff;
				border-radius: 35rpx;
				padding: 30rpx 20rpx;
				margin-bottom: 40rpx;
				box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.12);
				border: 1rpx solid #f0f0f0;

				.overview-header {
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					margin-bottom: 50rpx;

					.overview-title {
						font-size: 50rpx;
						font-weight: bold;
						color: #333333;
					}

					.update-time {
						display: flex;
						align-items: center;

						.time-text {
							margin-left: 20rpx;
							font-size: 36rpx;
							color: #666666;
						}
					}
				}

				.overview-grid {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 15rpx;

					.overview-item {
						background: #f8f9fa;
						border-radius: 25rpx;
						padding: 50rpx 25rpx;
						/* 左右内边距减小，让方块更宽 */
						text-align: center;
						border: 2rpx solid #e8e8e8;
						min-height: 200rpx;
						/* 增加最小高度 */
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						&.main-rainfall {
							background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
							border-color: #91d5ff;
						}

						&.hour-rainfall {
							background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
							border-color: #b7eb8f;
						}

						&.rain-intensity {
							background: linear-gradient(135deg, #fff2e8 0%, #ffbb96 100%);
							border-color: #ff9c6e;
						}

						&.today-rainfall {
							background: linear-gradient(135deg, #fff7e6 0%, #ffd591 100%);
							border-color: #ffc069;
						}

						&.day24-rainfall {
							background: linear-gradient(135deg, #f0f5ff 0%, #adc6ff 100%);
							border-color: #85a5ff;
						}

						&.yesterday-rainfall {
							background: linear-gradient(135deg, #f9f0ff 0%, #efdbff 100%);
							border-color: #d3adf7;
						}

						.item-label {
							display: block;
							font-size: 40rpx;
							color: #333333;
							margin-bottom: 25rpx;
							font-weight: 600;
							width: 100%;
						}

						.item-value {
							display: block;
							font-size: 72rpx;
							font-weight: bold;
							color: #1890ff;
							line-height: 1.2;
							margin-bottom: 15rpx;
							width: 100%;
						}

						.item-unit {
							display: block;
							font-size: 36rpx;
							color: #666666;
							font-weight: 500;
							width: 100%;
						}
					}
				}
			}

			// 详情区域
			.detail-section {
				margin-bottom: 30rpx;

				.section-header {
					margin-bottom: 25rpx;

					.section-title {
						font-size: 44rpx;
						font-weight: bold;
						color: #333333;
					}
				}

				.detail-grid {
					display: grid;
					gap: 25rpx;

					.detail-card {
						background: #ffffff;
						border-radius: 25rpx;
						padding: 35rpx;
						box-shadow: 0 6rpx 25rpx rgba(0, 0, 0, 0.08);
						border: 1rpx solid #f0f0f0;

						.card-header {
							display: flex;
							align-items: center;
							margin-bottom: 25rpx;
							padding-bottom: 20rpx;
							border-bottom: 2rpx solid #f0f0f0;

							.card-title {
								margin-left: 20rpx;
								font-size: 40rpx;
								font-weight: bold;
								color: #333333;
							}
						}

						.info-list {
							.info-item {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 20rpx;
								padding: 15rpx 0;

								&:last-child {
									margin-bottom: 0;
								}

								.info-label {
									font-size: 36rpx;
									color: #666666;
									font-weight: 500;
									flex: 1;
								}

								.info-value {
									font-size: 36rpx;
									color: #333333;
									font-weight: 600;
									flex: 2;
									text-align: right;
								}
							}
						}
					}
				}
			}

			// 空状态
			.empty-state {
				background: #ffffff;
				border-radius: 25rpx;
				padding: 80rpx 40rpx;
				text-align: center;
				box-shadow: 0 6rpx 25rpx rgba(0, 0, 0, 0.08);
				margin-bottom: 30rpx;
				border: 1rpx solid #f0f0f0;

				.empty-content {
					.empty-title {
						display: block;
						font-size: 44rpx;
						color: #333333;
						margin: 30rpx 0 20rpx;
						font-weight: bold;
					}

					.empty-desc {
						display: block;
						font-size: 36rpx;
						color: #999999;
						margin-bottom: 40rpx;
						line-height: 1.5;
					}

					.loading-icon {
						margin-top: 25rpx;
					}
				}
			}

			// 日志区域
			.log-section {
				.section-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 25rpx;

					.section-title {
						font-size: 42rpx;
						font-weight: bold;
						color: #333333;
					}

					.log-badge {
						background: #1890ff;
						color: white;
						padding: 12rpx 24rpx;
						border-radius: 20rpx;
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.log-container {
					background: #ffffff;
					border-radius: 25rpx;
					padding: 30rpx;
					box-shadow: 0 6rpx 25rpx rgba(0, 0, 0, 0.08);
					border: 1rpx solid #f0f0f0;

					.log-scroll {
						max-height: 500rpx;

						.log-item {
							background: #f8f9fa;
							border-radius: 18rpx;
							padding: 25rpx;
							margin-bottom: 20rpx;
							border: 1rpx solid #e8e8e8;

							&:last-child {
								margin-bottom: 0;
							}

							.log-header {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 15rpx;

								.log-time {
									font-size: 32rpx;
									color: #1890ff;
									font-weight: 500;
								}

								.log-type {
									font-size: 30rpx;
									color: #666666;
									background: #e6f7ff;
									padding: 8rpx 16rpx;
									border-radius: 12rpx;
									font-weight: 500;
								}
							}

							.log-content {
								font-size: 34rpx;
								color: #333333;
								line-height: 1.6;
								word-break: break-all;
							}
						}
					}
				}
			}
		}
	}
</style>

<style>
	page {
		background: #f8f9fa;
	}
</style>